<script lang="ts" setup>
import { ref, computed } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { showToast } from 'vant'
import { setPassword } from '@/api/user'
import { useRouter } from 'vue-router'

const router = useRouter()

const psw: Ref<string> = ref('')
const password: Ref<string> = ref('')

const flag: ComputedRef<boolean> = computed(() => {
  return psw.value != password.value || psw.value.length == 0
})

// 提交密码进行注册
function passwordClick() {
  setPassword({
    tel: localStorage.getItem('tel') || '',
    password: password.value
  }).then(res => {
    console.log(res);
    if (res.data.code == 200) {
      // iframe
      localStorage.removeItem('tel')
      showToast('恭喜您注册成功！')
      router.push('/login')
    } else {
      showToast('注册失败请在此注册！')
      // router.push('/login')
    }
  })
}

</script>
<template>
  <div class="my-box">
    <div class="my-cell">
      <van-field label="密码" v-model="psw" placeholder="请输入密码" />
    </div>
    <div class="my-cell">
      <van-field label="确认密码" v-model="password" placeholder="请再次输入密码" />
    </div>

    <div class="my-button">
      <van-button :disabled="flag" type="danger" block @click="passwordClick">提交</van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-box {
  padding: 50px 20px;
  box-sizing: border-box;
}

.my-cell {
  border: 1px solid gray;
  margin-bottom: 10px;
}

.my-button {
  margin-top: 30px;
}
</style>
